<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>

		<view>========================</view>
		<!-- 使用test组件
		通过:title="title"给test子组件传值
		通过@myEven自定义事件把子组件test组件的值传到父组件index中 -->
		<test v-if="flag" :title="title" @myEven="getNum"></test>
		<view>子组件test传到父组件index的值{{ num }}</view>
		<button @click="checkTest">显示/隐藏test组件</button>

		<view>========================</view>
		<test-a></test-a>
		<test-b></test-b>
	</view>
</template>

<script>
import test from '@/components/test.vue'; // @表示从根目录开始，引用components里面的test组件
import testA from '@/components/a.vue';
import testB from '@/components/b.vue';

export default {
	// 注册test组件，可以在本页面使用
	components: {
		test,
		'test-a': testA,
		'test-b': testB
	},
	data() {
		return {
			title: 'Hello',
			flag: true,
			num: 0
		};
	},
	// onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参） 只触发一次
	onLoad(options) {
		console.log('页面加载了', options);
	},
	// onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
	onShow() {
		// 触发多次
		console.log('页面显示了');
	},
	// onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {
		// 触发一次
		console.log('页面初次渲染完成了');
	},
	// onHide监听页面隐藏
	onHide() {
		// 触发多次
		console.log('页面隐藏了');
	},
	// onUnload监听页面卸载
	onUnload() {
		// 触发多次
		console.log('页面卸载了');
	},
	// onResize监听窗口尺寸变化，作用于App、微信小程序
	onResize() {
		// 触发多次
		console.log('页面窗口尺寸变化了');
	},
	// onPullDownRefresh监听用户下拉动作，一般用于下拉刷新
	onPullDownRefresh() {
		// 触发多次
		console.log('页面被下拉了');
	},
	// onReachBottom页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
	onReachBottom() {
		// 触发多次
		console.log('页面到底部了');
	},
	// onShareAppMessage用户点击右上角分享
	onShareAppMessage() {
		// 触发多次
		console.log('页面被分享了');
	},
	// onPageScroll监听页面滚动
	onPageScroll() {
		// 触发多次
		console.log('页面滚动了');
	},
	methods: {
		checkTest() {
			this.flag = !this.flag;
		},
		// 接收test子组件传过来的值
		getNum(num) {
			console.log('得到test子组件传过来的值-->' + num);
			this.num = num;
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>
